<template lang="html">
    <div>
 <van-nav-bar  title="搜索结果" left-arrow @click-left="$router.go(-1)" fixed>
 </van-nav-bar>
   <div class="main">
   <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
       <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad">
          <ArticleItem v-for="obj in searchReList" :key="obj.art_id" :article="obj" :isShowCorss="isShowCorss" @click.native="enterDetail(obj.art_id)"/>
          </van-list>
     </van-pull-refresh>
   </div>
    </div>
</template>
<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { Notify } from 'vant'
export default {
  name: 'SearchResult',
  components: {
    ArticleItem
  },
  data () {
    return {
      page: 1,
      searchReList: [],
      loading: false,
      finished: false,
      isLoading: false,
      isShowCorss: false
    }
  },
  created () {
    // 请求列表
    console.log(this.$route.params)
    this.getData()
  },
  methods: {
    onRefresh () {
      this.searchReList = []
      this.page = 1
      this.getData()
    },
    onLoad () {
      if (this.searchReList.length > 0) {
        this.getData()
        console.log('load')
      }
    },
    async getData () {
      let ReList = []
      try {
        const res = await this.$API.reqSearchList({ kw: this.$route.params.kw, page: this.page })
        if (res.status === 200) {
          ReList = res.data.data.results
          console.log('page' + res.data.data.page)
          this.page = res.data.data.page + 1
          if (res.data.data.page === null) {
            this.finished = true
          }
        }
      } catch (error) {
        Notify({ type: 'danger', message: '出错了' })
      }
      this.searchReList = [...this.searchReList, ...ReList]
      console.log(this.searchReList)
      this.loading = false
      this.isLoading = false
    },
    enterDetail (id) {
      this.$router.push({ path: '/articleDetail', query: { id } })
    }
  }
}
</script>
<style lang="less" scoped>
.main{
margin-top:35px;
}
</style>
